<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        #left-list{
            width: 240px;
            background-color: #444;
            border-right: 1px solid;
            overflow: hidden;
            position: absolute;
            top: 0;
            bottom: 0;
        }
        #left-list-inner{
            position: absolute;
            top: 0;
            min-height: 100%;
        }
        .friend-item{
            height: 80px;
            width: 240px;
            overflow: hidden;
            border-bottom:1px solid;
            border-right: 1px solid;
            vertical-align: top;
        }
        .friend-item:hover{
            cursor: pointer;
            background-color: #222;
        }

        .head-pic{
            height: 80px;
            width: 80px;
            vertical-align: center;
            display: inline-block;
            box-sizing: border-box;
        }
        .head-pic img{
            height: 48px;
            width: 48px;
            border-radius: 50%;
            margin: 16px;
        }
        .new-msg-tip{
            position: absolute;
            background-color: #ed3434;
            color: whitesmoke;
            left: 55px;
            top: 10px;
            border-radius: 30%;
            padding:1px;
            border:1px solid whitesmoke;

        }


        .friend-right-info{
            display: inline-block;
            box-sizing: border-box;
            height: 80px;
            vertical-align: top;
            position: absolute;
            left: 80px;

            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .friend-right-info div{
            width: 140px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .friend-name{
            margin-top: 15px;
            color: whitesmoke;
        }

        .sign{
            color: lightgray;
        }

        #right-window{
            height: 100%;
            position: absolute;
            left: 240px;
            right: 0;
            display: none;

        }
        #right-name{
            background-color: #eee;
            width: 100%;
            height: 40px;
            font-size: 18px;
            line-height: 40px;
            text-align: center;
        }
        #right-content-window{
            overflow: hidden;
            position: absolute;
            top: 40px;
            bottom: 120px;
            right: 0;
            left: 0;
            word-break: break-all;
            word-wrap: break-word;
        }
        #send-msg-box{
            position: absolute;
            height: 120px;
            bottom: 0;
            left: 0px;
            right: 0px;
            border-top: grey 1px solid;
        }
        .friend-msg,.my-msg{
            max-width: 60%;
            line-height: 20px;
            margin-top: 20px;
            border-radius: 5px;
        }
        .friend-msg{
            margin-left: 20px;
        }
        .my-msg{
            background-color:rgb(36, 171, 236);
            margin-left: auto;
            margin-right: 20px;
        }
        .friend-msg::before {
            top: 11px;
            left: -10px;
            display: inline-block;
            position: relative;
            content: "  ";
            border-left: 5px solid transparent;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-right: 5px solid rgb(227, 236, 241);
        }
        .friend-msg{
            background-color: rgb(227, 236, 241);
        }
        .my-msg::before {
            left: 100%;
            display: inline-block;
            position: relative;
            content: "  ";
            border-left: 5px solid rgb(36, 171, 236);
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-right: 5px solid transparent;
        }

        #content-list{
            position: absolute;
            left: 0;
            right: 0;
            min-height: 400px;
        }
        textarea{
            width: 100% ;
            height: 100%;
            box-sizing: border-box;
            border:none;
            resize: none;
        }
        #input-tip{
            position: absolute;
            bottom: 10px;
            right: 10px;
            font-size: 10px;
            color: gray;

        }
        .
    </style>
</head>
<body onload="loadData()">
    <div id="left-list"onmouseenter="$(this).addClass('mouse-enter')" onmouseleave="$(this).removeClass('mouse-enter')">
        <div id="left-list-inner">
        </div>
    </div>
    <div id="right-window" onmouseenter="$(this).addClass('mouse-enter')" onmouseleave="$(this).removeClass('mouse-enter')">
        <div id="top-name-div">
            <div id="right-name">语扉</div>
            <div id="right-content-window" >
                <div id="content-list">

                </div>
            </div>
            <div id="send-msg-box">
                <textarea id="input-box" placeholder="输入消息吧..."></textarea>
                <div id="input-tip">按 回车 发送</div>
            </div>
        </div>

    </div>

<script src="../../lib/jquery-3.7.0.js"></script>
<script src="../../js/pages/friend/friend.js">
</script>
</body>
</html>